import React from 'react'
import { Icon, Button, Radio } from 'antd';
import { WeaSelect } from 'ecCom';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
import './../../style/timeselect/TimeSelect';
import moment from 'moment';

export default class TimeSelect2 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            optionsMonth: [
                {
                    key: "1",
                    showname: "1月"
                }, {
                    key: "2",
                    showname: "2月"
                }, {
                    key: "3",
                    showname: "3月"
                }, {
                    key: "4",
                    showname: "4月"
                }, {
                    key: "5",
                    showname: "5月"
                }, {
                    key: "6",
                    showname: "6月"
                }, {
                    key: "7",
                    showname: "7月"
                }, {
                    key: "8",
                    showname: "8月"
                }, {
                    key: "9",
                    showname: "9月"
                }, {
                    key: "10",
                    showname: "10月"
                }, {
                    key: "11",
                    showname: "11月"
                }, {
                    key: "12",
                    showname: "12月"
                }
            ],
            optionsYear: this.props.optionsYear,
            monthClass: 'show-div',
            quarterclass: 'hidden-div',
            monthValue: '',
            yearValue: '',
            defaultValue: this.props.defaultValue,
            yearId: this.props.yearId,
            monthId: this.props.monthId,
            pquarter:new moment().format('Q'),
        }
    }

    componentWillReceiveProps(newProps) {
        if (newProps.defaultValue == "1") {
            this.setState({ monthclass: 'hidden-div', quarterclass: 'hidden-div' });
        } else if (newProps.defaultValue == "2") {
            this.setState({ quarterclass: 'show-div', monthClass: 'hidden-div' });
        } else if (newProps.defaultValue == "3") {
            this.setState({ quarterclass: "hidden-div", monthClass: "show-div" });
        }
        this.setState({ optionsYear: newProps.optionsYear, defaultValue: newProps.defaultValue, monthValue:newProps.monthValue, yearValue: newProps.yearValue, yearId:newProps.yearId, monthId: newProps.monthId });
    }

    onMainChange = (e) => {
        let val = e.target.value;
        let canReturn = false;
        if (val == 1) {
            this.setState({ quarterclass: 'hidden-div', monthClass: 'hidden-div' });
            canReturn = true;
        } else if (val == 2) {
            this.setState({ quarterclass: 'show-div', monthClass: 'hidden-div' });
            canReturn = true;
        } else if (val == 3) {
            this.setState({ quarterclass: 'hidden-div', monthClass: 'show-div' });
            canReturn = true;
        }
        if (canReturn && typeof this.props.typeChange === 'function') {
            this.props.typeChange(val);
        } else {
            console.log('typeChange:', val);
        }
    }

    yearChange = (v, showname) => {
        this.setState({ yearValue: v });
        if (typeof this.props.yearChange === 'function') {
            this.props.yearChange(v);
        } else {
            console.log('yearChange:', v);
        }
    }

    monthChange = (v, showname) => {
        this.setState({ monthValue: v });
        if (typeof this.props.monthChange === 'function') {
            this.props.monthChange(v);
        } else {
            console.log('monthChange:', v);
        }
    }

    render() {
        const { optionsYear, optionsMonth, quarterclass, monthClass,pquarter, monthValue, yearValue, defaultValue, yearId, monthId } = this.state;
        return (
            <div className="timeGroup">
                <div style={{ display: "inline-block" , position: 'relative'}} id={yearId}>
                    <WeaSelect
                        options={optionsYear}
                        viewAttr={2}
                        value={yearValue}
                        onChange={this.yearChange}
                        layout={document.getElementById(yearId)}
                    />
                </div>
                <div style={{ marginLeft: 10, display: "inline-block" }}>
                    <RadioGroup defaultValue={defaultValue} onChange={(e) => this.onMainChange(e)}  >
                        <RadioButton value="1">年</RadioButton>
                        {/* <RadioButton value="2">季度</RadioButton> */}
                        <RadioButton value="3">月</RadioButton>
                    </RadioGroup>
                </div>
                <div style={{ marginLeft: 1 }} className={quarterclass}>
                    <RadioGroup onChange={(e) => this.onQuarterChange(e)} defaultValue={pquarter}>
                        <RadioButton value="1">1季度</RadioButton>
                        <RadioButton value="2">2季度</RadioButton>
                        <RadioButton value="3">3季度</RadioButton>
                        <RadioButton value="4">4季度</RadioButton>
                    </RadioGroup>
                </div>
                <div className={monthClass} id={monthId} style={{ marginLeft: '5px', position: 'relative'}}>
                    <WeaSelect
                        style={{ minWidth: '50px', marginBottom: '4px' }}
                        options={optionsMonth}
                        value={monthValue}
                        onChange={this.monthChange}
                        layout={document.getElementById(monthId)}
                    />
                </div>
            </div>
        )
    }
}